<template>
	<view>
		<view class="">test组件</view>
		<view class="list-wrap">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="item.groupName" v-for="(item, index) in listdata"
				:key="index">
				<u-cell :titleStyle="{fontWeight: 500}" :title="item1.title" v-for="(item1, index1) in item.list"
					:key="index1" isLink @click="openPage" :name="item1.path">
					<image slot="icon" class="u-cell-icon" src="https://cdn.uviewui.com/uview/example/color.png"
						mode="widthFix"></image>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		name: "test",
		data() {
			return {
				listdata: [{
					groupName: '基础组件',
					groupName_en: 'Basic components',
					list: [{
						path: '/pages/componentsB/color/color',
						icon: 'color',
						title: 'Color 色彩',
						title_en: 'Color'
					}, {
						path: '/pages/componentsA/icon/icon',
						icon: 'icon',
						title: 'Icon 图标',
						title_en: 'Icon'
					}]
				}]
			};
		}
	}
</script>

<style lang="scss">
	.u-block {
		padding: 14px;

		&__section {
			margin-bottom: 10px;
		}

		&__title {
			margin-top: 10px;
			font-size: 15px;
			color: $u-content-color;
			margin-bottom: 10px;
		}

		&__flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
		}
	}

	// 使用了cell组件的icon图片样式
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-page {
		padding: 15px 15px 40px 15px;
	}

	.u-demo-block {
		flex: 1;
		margin-bottom: 23px;

		&__content {
			@include flex(column);
		}

		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin-bottom: 8px;
			@include flex;
		}
	}


	.u-cell-icon1 {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>